<!DOCTYPE HTML>
<html>
<head>
   <meta charset="utf-8"/>
   <title>JS简易年历</title>
<style>
    #tab{
        width:410px;height:680px;background:#ccc;
    }
    div ul{
        width:400px;margin: 0 auto;
    }
    div ul li{
        list-style-type:none;width:20%;display:block;float:left;color:white;background:black;margin:15px 12px;
        text-align:center;
    }
    div ul li p{
        font-weight:bold;
    }
    div.text{
        clear:both;background:#ccc;width:280px;border:1px solid white;margin:0 auto;
    }
</style>
<script>
    window.onload = function(){
        //鼠标移到对应的月份，下面div的内容跟着变化
        var arr= [
            '1月活动,快过年了。。。。',
            '2月活动,去踏青。。。。。',
            '3月活动,旅游开始。。。。。',
            '4月活动,清明扫码。。。。。',
            '5月活动,。。。。。',
            '6月活动,。。。。。',
            '7月活动,去踏青。。。。。',
            '8月活动,去踏青。。。。。',
            '9月活动,去踏青。。。。。',
            '10月活动,去踏青。。。。。',
            '11月活动,去踏青。。。。。',
            '12月活动,去踏青。。。。。',
        ];

    	var oTab = document.getElementById('tab');
    	var aLi = oTab.getElementsByTagName('li');
    	var oTxt = oTab.getElementsByTagName('div')[0];

        function setColor(){
            var oLi = oTab.getElementsByTagName('d1');
            oLi.style.background = 'red';
            
        }

        for(var i=0;i<aLi.length;i++){
            aLi[i].index = i;  //index从0开始
            aLi[i].onmouseover = function(){
                for(var i=0;i<aLi.length;i++){
                    aLi[i].className = '';
                }
                this.className = 'active';
                oTxt.innerHTML = '<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
            }
        }
    }

    

</script>
</head>
<body>

    <div id="tab" class="calendar"/>
        <ul>
        	<li id="d1" onmouseover="setColor()" class="active"><h2>1</h2><p>JAN</p></li>
        	<li id="d1"><h2>2</h2><p>FER</p></li>
        	<li id="d1"><h2>3</h2><p>MAR</p></li>
        	<li id="d1"><h2>4</h2><p>APR</p></li>
        	<li id="d1"><h2>5</h2><p>MAY</p></li>
        	<li id="d1"><h2>6</h2><p>JUN</p></li>
        	<li id="d1"><h2>7</h2><p>JUL</p></li>
        	<li id="d1"><h2>8</h2><p>AUG</p></li>
        	<li id="d1"><h2>9</h2><p>SEP</p></li>
        	<li id="d1"><h2>10</h2><p>OCT</p></li>
        	<li id="d1"><h2>11</h2><p>NOV</p></li>
        	<li id="d1"><h2>12</h2><p>DEC</p></li>
        </ul>
        <div class="text">
            <h2>1月活动</h2>
            <p>快过年了，大家可以商量去哪玩~</p>
        </div>
    </div>

</body>
</html>















































